<template>
  <div class="main-container">
    <div class="main-detail">
      <el-card style="border-radius: 15px">
        <div class="main-detail-header">
          <div class="main-detail-profile">
            <img src="https://assets.codepen.io/3364143/Screen+Shot+2020-08-01+at+12.24.16.png" alt=""
                 class="members inbox-detail"/>
            <div class="main-detail-name">Natalie Smith</div>
          </div>
        </div>

        <div class="main-contents">
          <div class="mail-contents-subject">
            <div class="mail-contents-title">Write an article about design</div>
            <i class="el-icon-time" style="display: flex">
              <p style="display: flex;margin: 0">12 Mar, 2019</p>
            </i>
          </div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
          <div class="mail-inside">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Fusce accumsan commodo lectus gravida dictum.
            Aliquam a dui eu arcu hendrerit porta sed in velit. Fusce eu semper magna.
            Aenean porta facilisis neque, ac dignissim magna vestibulum eu.
            Etiam id ligula eget neque placerat ultricies in sed neque. Nam vitae rutrum est.
            Etiam non condimentum ante, eu consequat orci. Aliquam a dui eu arcu hendrerit porta sed in velit.
            Fusce eu semper magna.
          </div>
          <i class="el-icon-view" style="font-size: 30px;float: right;padding: 10px;width: 150px;">
            <span>浏览量</span>
          </i>
          <i class="el-icon-star-off" style="font-size: 30px;float: right;padding: 10px">
            <span>like</span>
          </i>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailsView",

  mounted() {
  }
}
</script>

<style scoped>
:root {
  --border-color: #e5e4e9;
  --theme-bg-color: #fff;
  --main-container-bg: #f0f0f7;
  --main-light-color: #a1a4b9;
  --main-color: #7a7e9d;
}

.main-container {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  background-color: var(--main-container-bg);
  flex-direction: column;
  max-width: 800px;
  height: 100vh;
  margin: 0 auto;
}

.main-detail {
  display: flex;
  animation: slideX 0.6s both;
  flex-direction: column;
  overflow: auto;
  background-color: var(--theme-bg-color);
}

.main-detail-profile {
  display: flex;
  align-items: center;
}

.main-detail-header {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-detail-name {
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
  white-space: nowrap;
}

.main-contents {
  padding: 10px;
  width: 700px;
}

.members {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

.inbox-detail {
  width: 44px;
  height: 44px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.mail-contents-subject {
  align-items: center;
  height: 70px;
}
.mail-contents-title {
  padding: 5px 0;
  display: flex;
  font-weight: 700;
  font-size: 17px;
  margin-left: 5px;
}
.mail-inside {
  padding: 20px 0 30px;
  border-bottom: 1px solid var(--border-color);
  color: var(--main-color);
  line-height: 1.8em;
}
</style>
